<template>
  <div>
    <div class="box">
      <div class="box0 box1"></div>
      <div class="box0 box2"></div>
      <div class="box0 box3"></div>
      <div class="box0 box4"></div>
      <div style="width: 31.25rem; height: 15rem" id="cake"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "MyVueEcharts2",

  data() {
    return {
      option: {
        title: {
          text: "大洲感染人数饼状图",
          textStyle: {
            color: "#ffffff",
            fontSize: 12,
            fontStyle: 100,
          },
          left: "center",
        },
        // 图例
        legend: {
          bottom: 0,
          textStyle:{ 
            color:"#747da8"
          }
        },
        // 系列
        series: [
          {
            // 饼状图
            type: "pie",
            data: [
              {
                value: "200",
                // 图形的样式
                itemStyle: {
                  color: "#1089e7",
                },
                name: "北美洲",
                // 标签是否显示
                label: {
                  show: false,
                },
              },
              {
                value: "20",
                // 图形的样式
                itemStyle: {
                  color: "#eb6f6f",
                },
                name: "欧洲",
              },
            ],
            labelLine: {
              show: false,
            },
            radius: [55, 80],
            name: "北美洲",
            label: {
              show: false,
            },
          },
        ],
      },
    };
  },

  mounted() {
    let cake = document.querySelector("#cake");
    let arr = echarts.init(cake);
    arr.setOption(this.option);
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  width: 31.25rem;
  height: 15.9375rem;
  border: .0625rem solid #06275b;
  position: relative;
  background-color: rgba(1, 11, 56, 0.1);
  margin-top: .625rem;
  .box0 {
    width: .625rem;
    height: .625rem;
  }
  .box1 {
    border-top: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
  }
  .box2 {
    border-top: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    right: 0;
    top: 0;
  }
  .box3 {
    border-bottom: .0625rem solid #02a4b4;
    border-left: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .box4 {
    border-bottom: .0625rem solid #02a4b4;
    border-right: .0625rem solid #02a4b4;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>